<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div#foods{
				margin: 5px;
				padding: 5px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<div id="ipts">
					文本:<input type="text" id="ipt1" placeholder="请输入内容" /><br />
					密码:<input type="password" id="ipt2" placeholder="请输入密码" /><br />
					颜色:<input type="color" id="ipt3" value="#ff9900" /><br />
					日期:<input type="date" id="ipt4"  /><br />
					日期+时间:<input type="datetime-local" id="ipt5" /><br />
					月份:<input type="month" id="ipt6" /><br />
					周(星期):<input type="week" id="ipt7" /><br />
					小时:<input type="time" id="ipt8" /><br />
					文本域<textarea id="ipt9"></textarea><br />
					<br />
					<br />
					<button type="button" onclick="fn1()">
						获取
						ipt1,ipt2,ipt3,ipt4,ipt5,ipt6,ipt7,ipt8,ipt9
						内容
					</button>
					<br />
					<button type="button" onclick="fn11()">
						给
						ipt1,ipt2,ipt3,ipt4,ipt5,ipt6,ipt7,ipt8,ipt9
						设置默认值
					</button>
				</div>
				
								<br />
				<br />
				<div id="sex">
					<label>
						男<input type="radio" name="sex" value="0" checked />
					</label>
					<label for="sex1">
						女
					</label>
					<input type="radio" name="sex" value="1" />
					<br />
					<br />
					<div>
						<button type="button" onclick="fn2()">获取性别</button><br />
						<button type="button" onclick="fn22()">选中性别:女</button>
					</div>
				</div>
				
				<br />
				<br />
				<div id="foods">
					<div>
						美食
					</div>
					<div id="foodsIpt">
						<label>
							火锅<input type="checkbox" value="f1" onclick="fn36()"/>
						</label>	
						<label>
							羊蝎子<input type="checkbox" value="f2" onclick="fn36()"/>
						</label>
						<label>
							海底捞<input type="checkbox" value="f3" onclick="fn36()"/>
						</label>
						<label>
							呷哺呷哺<input type="checkbox" value="f4" onclick="fn36()"/>
						</label>
						<label>
							辣唇号<input type="checkbox" value="f5" onclick="fn36()"/>
						</label>
						<label>
							巴奴<input type="checkbox" value="f6" onclick="fn36()"/>
						</label>
						<label>
							青菜<input type="checkbox" value="f7" onclick="fn36()"/>
						</label>
					</div>
					<br />
					<div>
						<button type="button" onclick="fn3()">获取选中项</button><br />
						<button type="button" onclick="fn33()">设置选中项</button><br />
						<br />
						<br />
						<label>
							全选/全不选<input id="checkAll" class="kky" type="checkbox" onclick="fn34(this)" />
						</label>
						<br />
						<br />
						<button type="button" onclick="fn35()">反选</button>
					</div>
				</div>
				
				
			</div>
			
			
		</div>
		
		<script type="text/javascript">
			 function fn36(){
			   var checkAll=document.getElementById("checkAll");
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   var f=true;
			   
			   for(var i=0;i<ipts.length;i++){
				   if(!ipts[i].checked){
					   f=false;
					   break;
				   }
			   }
				checkAll.checked=f;
		   }
			 
			  //反选
		   function fn35(){
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   for(var i=0;i<ipts.length;i++){
					
					ipts[i].checked = !ipts[i].checked;// !取反
					
			   }
			   
			   fn36();//判断是否选中 全选/全不选
		   }
		   
		    //获取 多选框 选中项
		   function fn3(){
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   console.log("ipts:",ipts);
			   var foodsArr=[];//存放被选中项
			   for(var i=0;i<ipts.length;i++){
				   if(ipts[i].checked){
					   foodsArr.push(ipts[i].value);
				   }
			   }
			   
			   console.log("你选中了:",foodsArr);
		   }
		   
		   //设置 多选框 选中项
		   function fn33(){
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   ipts[0].checked=true;
			   ipts[2].checked=true;
			   ipts[4].checked=true;
		   }
			 
			 //全选/全不选
		   function fn34(that){
			   //console.log("全选/全不选",that,"我自己是否被选中",that.checked);
			   
			   var f=that.checked;//全选/全不选 的选中状态
			   
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   for(var i=0;i<ipts.length;i++){
				   ipts[i].checked=f;
			   }
			   
		   }
			 
			//获取性别
		   function fn2(){
			   var ipts=document.querySelectorAll("div#sex input[type='radio']");
			   console.log("ipts:",ipts);
			   var sexV;//存放被选中的单选框的value
			   
			   //因为只有两个选项所以用了if...else,要是有2个以上,最好使用循环
			   if(ipts[0].checked){//
				   sexV=ipts[0].value;
			   }else{
				   sexV=ipts[1].value;
			   }
			   console.log("sexV:",sexV,"你选中了 ",sexV=="0"?"小哥哥":"小姐姐")
		   } 
		   
		   //设置选中项
		   function fn22(){
			   var ipts=document.querySelectorAll("div#sex input[type='radio']");
			   ipts[1].checked=true;
		   }
		   
		   
		</script>
	</body>
</html>
